<template>
	<view>
		<view class="qrcode">
			<canvas :style="{ width: size + 'px', height: size + 'px', background: bgc }" canvas-id="couponQrcode" @touchstart='www'></canvas>
		</view>
	</view>
</template>

<script>
const qrCode = require('./weapp-qrcode.js')
export default {
	data() {
		return {
			bgc: 'rgba(200, 200, 200, 0.1)', //测试画布是否与内容相同大小
			canvasQrPath: '', //
		}
	},

	props: {
		text: {
			type: String,
			default: 'hello'
		},
		size: {
			type: Number,
			default: 340
		},
		colorDark: {
			type: String,
			default: '#000000'
		},
		colorLight: {
			type: String,
			default: '#ffffff'
		},
	},
	// 在实例创建完成后被立即调用
	created() {
		setTimeout(() => {
			this.couponQrCode()
		}, 1000)
	},
	watch: {
		text() {
			setTimeout(() => {
				this.couponQrCode()
			}, 500)
		}
	},
	methods: {
		www() {
			setTimeout(() => {

			}, 1000)
		},
		// 二维码生成工具
		couponQrCode() {
			var that = this;
			new qrCode('couponQrcode', {
				text: this.text,
				width: this.size,
				height: this.size,
				showLoading: true, // 是否显示loading
				loadingText: '二维码生成中', // loading文字
				colorDark: this.colorDark, //二维码暗部颜色
				colorLight: this.colorLight, //二维码亮部颜色
				correctLevel: qrCode.CorrectLevel.H, //二维码质量L/M/Q/H
				usingIn: this //在自定义组件下，第二个参数传入组件实例this
			})
			// 把当前画布指定区域的内容导出生成图片，并返回文件路径。为啥没日志 失败了吧。。
			uni.canvasToTempFilePath({
				canvasId: 'couponQrcode',
				success: function (res) {
					// 在H5平台下，tempFilePath 为 base64
					// console.log('yz-qr图片路径:', res.tempFilePath)
					that.canvasQrPath = res.tempFilePath
				},
				fail: function (err) {
					console.log(err, 'err999')
				}
			}, this)
			this.$emit('update:canvasQrPath', that.canvasQrPath)
		}
	}
}
</script>

<style>
.qrcode {
	padding: 24rpx;
	display: flex;
	align-items: center;
	justify-content: center;
}
</style>
